import { Card, Col, Row } from 'antd';
import axios from '../../api/index';
import { useEffect, useState } from 'react';
import { InfiniteScroll } from 'antd-mobile'
import Heard from '../../hooks/Heard';
import { useNavigate } from 'react-router-dom';
function Index() {
  const nav=useNavigate();
  const [list, setList] = useState([])
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const getlist = () => {
    axios.get('/api/article/list', {
      params: {
        page: page,//页码
        pageSize: pageSize,//每页显示条数
      }
    }).then((res) => {
      console.log(res.data.rows);
      
      setList(res.data.rows)
    })
  }
  useEffect(() => {
    getlist()
  }, [page,pageSize])
  const [hasMore, setHasMore] = useState(true)
  // 无限滚动
  async function loadMore() {
    if (page * pageSize >= 100) {
      setHasMore(false)
    } 
    setPage(page + 1)
    setPageSize(pageSize + 10)
    getlist()
  }
  
 const tz=(id)=>{
  nav(`/xq/${localStorage.getItem('id')}`)
 }
  return (
    <div>
      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
        <Col span={5}><Heard/></Col>
        <Col span={14}>
          <div style={{with:'100%',height:'400px',overflow:'auto'}}>
            {
              
              list.map((item, index) => {
                return <Card title={item.title} key={index}
                extra={<a href="#">阅读量：{item.viewCount}</a>} style={{marginTop:'10px'}}>
                  <p onClick={()=>tz( localStorage.setItem('id',item.id))}>内容：{item.content}</p>
                  <p>创建时间：{item.createdAt}</p>
                  <p>更新时间：{item.updatedAt}</p>
                </Card>
              })
              
            }
             <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
          </div>
        </Col>
        <Col span={2}>col-8</Col>
      </Row>
    </div>
  )
}

export default Index
